<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>getAndPostExamplel.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
		<script type="text/javascript">
        var xmlHttp;
        //创建XMLhttpRequest对象
        function createXMLHttpRequest() {
            if (window.ActiveXObject) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if (window.XMLHttpRequest) {
                xmlHttp = new XMLHttpRequest();
            }
        }

        //生成传递到服务器的参数查询串，参数值由页面表单填写得到
       function createQueryString() {
            var firstName = document.getElementById("firstName").value;
            var middleName = document.getElementById("middleName").value;
            var birthday = document.getElementById("birthday").value;
            var queryString = "firstName=" + firstName + "&middleName=" + middleName
            + "&birthday=" + birthday;
            return queryString;
        }

        //点击按钮响应的Get方法主函数
        //Get方法把参数值以名=值方式在xmlHttp.open("GET", queryString, true)中传递,queryString的形式为URL?参数名=值&参数名=值...;而xmlHttp.send(null);
        function doRequestUsingGET() {
            createXMLHttpRequest();//第一步：创建XMLHttpRequest对象
            var queryString = "GetAndPostExample?";
            queryString = queryString + createQueryString()
            + "&timeStamp=" + new Date().getTime();//第二步：定义传递的参数值字符串
            xmlHttp.open("GET", queryString, true);//第三步：建立与服务器的请求
            xmlHttp.onreadystatechange = handleStateChange;//第四步：监听状态-->转到监听状态函数    
            xmlHttp.send(null);//第五步：发送请求，并且立即返回
        }

        //点击按钮响应的POST方法主函数
        //POST方法把参数值以名=值方式在xmlHttp.send(queryString)中传递,queryString的形式为参数名=值&参数名=值...;
        function doRequestUsingPOST() {
            createXMLHttpRequest();//第一步：创建XMLHttpRequest对象
            var url = "GetAndPostExample?timeStamp=" + new Date().getTime();
            var queryString = createQueryString();//第二步：定义传递的参数值字符串
            xmlHttp.open("POST", url, true);//第三步：建立与服务器的请求
            xmlHttp.onreadystatechange = handleStateChange;//第四步：监听状态-->转到监听状态函数
            xmlHttp.setRequestHeader("Content-Type",
            "application/x-www-form-urlencoded;");
            xmlHttp.send(queryString);//第五步：发送请求，并且立即返回
        }

        //监听状态函数
        function handleStateChange() {
            if(xmlHttp.readyState == 4) {
                if(xmlHttp.status == 200) {
                parseResults();//-->转到函数parseResults输出从服务器返的值
                }
            }
        }

        //在页面显示从服务器传来的结果
       function parseResults() {
            var responseDiv = document.getElementById("serverResponse");
            if(responseDiv.hasChildNodes()) {
            responseDiv.removeChild(responseDiv.childNodes[0]);
        }
        var responseText = document.createTextNode(xmlHttp.responseText);//
        responseDiv.appendChild(responseText);
        }
</script>
	</head>

	<body>
		<h1>
			Enter your first name, middle name, and birthday:
		</h1>
		<table>
			<tbody>
				<tr>
					<td>
						First name:
					</td>
					<td>
						<input type="text" id="firstName" />
				</tr>
				<tr>
					<td>
						Middle name:
					</td>
					<td>
						<input type="text" id="middleName" />
				</tr>
				<tr>
					<td>
						Birthday:
					</td>
					<td>
						<input type="text" id="birthday" />
				</tr>
			</tbody>
		</table>
		<form action="#">
			<input type="button" value="Send parameters using GET"
				onclick="doRequestUsingGET();" />
			<!--调用Get方法主函数-->
			<br />
			<br />
			<input type="button" value="Send parameters using POST"
				onclick="doRequestUsingPOST();" />
			<!--调用POST方法主函数-->
		</form>
		<br />
		<h2>
			Server Response:
		</h2>
		<div id="serverResponse"></div>
	</body>
</html>
